<template>
  <!--小店详情-关联直播  -->
  <div class="liveAnalysisShop">
    <div class="vip_pay_box" v-if="!vipRootObj[159][190].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[159][190].ownerMinLevel" />
      </div>
    </div>
    <template v-else>
      <div class="top">
        <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="liveData">
        <div class="title">直播数据</div>
        <div class="volume">
          <div>
            直播总销量
            <span>{{volume}}</span>
          </div>
          <div>
            直播总销售额
            <span>{{amount}}</span>
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div>
          <p class="title">直播时长分布</p>
          <div>
            <BigPie v-if="durationList.length" :valueData="durationList" />
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading2&&!durationList.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div>
          <p class="title">开播时间统计</p>
          <div>
            <KChart
              v-if="trendX.length&&trendY.length"
              :xData="trendX"
              :series1="trendY"
              name1="开播时间统计"
              toolTip="开播场次"
              title="场次"
            />
            <div
              v-loading="loading3"
              v-if="loading3"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading3&&!trendX.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="liveList">
        <div class="title">直播列表</div>
        <div class="last_list">
          <section>
            <table class="table">
              <thead>
                <tr>
                  <th>直播间</th>
                  <th>达人</th>
                  <th>开播时间</th>
                  <th @click="sort_fun(true, 2)" v-if="orderType ==0 && sortValue ==2">
                    直播销量
                    <img src="@/assets/meng/down_up.png" />
                  </th>
                  <th v-else @click="sort_fun(false, 2)">
                    直播销量
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 1 && sortValue == 2" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                  <th @click="sort_fun(true, 3)" v-if="orderType ==0 && sortValue ==3">
                    直播销售额
                    <img src="@/assets/meng/down_up.png" />
                  </th>
                  <th v-else @click="sort_fun(false, 3)">
                    直播销售额
                    <img src="@/assets/meng/up_down.png" v-if="orderType == 1 && sortValue == 3" />
                    <img src="@/assets/meng/no_down_up.png" v-else />
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in table_data01" :key="index">
                  <td>
                    <div class="rightBox" @click="toLiveDetlis(item.status,item.roomId)">
                      <!-- @click="toLiveDetlis(item.status,item.roomId)" -->
                      <div class="picture">
                        <img :src="item.roomLogo" alt v-errorImg:live />
                        <div class="playingIcon" v-if="item.status == 1">
                          <p class="livingGif">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                          </p>
                        </div>
                      </div>
                      <div class="info">
                        <div class="info_top">{{item.roomTitle}}</div>
                        <div class="info_btm">直播时长: {{item.duration}}</div>
                      </div>
                    </div>
                  </td>
                  <td class="talentTd cursor" @click="talentdetails(item.authorId)">
                    <img :src="item.logo" alt v-errorImg:talent />
                    <span>{{item.nickName}}</span>
                  </td>
                  <td>{{item.beginTime.substring(-3,16) }}</td>
                  <td>{{ item.livevolume }}</td>
                  <td>{{ item.livesales }}</td>
                </tr>
              </tbody>
            </table>
            <div class="pageBox" v-if="table_data01.length">
              <el-pagination
                background
                layout="prev, pager, next, jumper"
                :hide-on-single-page="true"
                :total="totalCount"
                :page-size="size"
                :current-page="page"
                @current-change="changeCurrentFn"
              ></el-pagination>
            </div>
            <div class="empty addTop" v-if="!pageLoading && !table_data01.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            <div
              v-loading="pageLoading"
              v-if="pageLoading"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
          </section>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
import KChart from '../../wang/talent/tdetails/NewComponents/KChart.vue';
export default {
  name: 'LiveAnalysisShop',
  components: { BigPie, KChart },
  data() {
    return {
      KindName: '30天',
      liveTime: [],
      // 选择时间 不可选的日期.
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 24 * 60 * 60 * 1000
          ); // 返回 所有时间 大于 当前时间
        }
      },
      loading2: false,
      loading3: false,
      trendX: [],
      trendY: [],
      orderType: 0, // 0 降序 1 升序
      sortValue: 3, //1 开播时间 2 销量 3 销售额
      table_data01: [],
      pageLoading: false,
      page: 1,
      size: 9,
      endDate: '',
      startDate: '',
      totalCount: 0, //总条数
      volume: 0, //销量
      amount: 0, //销售额
      durationList: [],
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  mounted() {
    this.liveListAPI();
    this.liveDataAPI();
  },

  watch: {
    //  时间选择器
    KindName: function (newVal, oldVal) {
      // 请求表格第一页数据
      this.page = 1;
      if (this.KindName != '') {
        this.KindName = newVal;
        this.durationList = [];
        this.trendX = [];
        this.trendY = [];
        this.table_data01 = [];
        this.liveListAPI();
        this.liveDataAPI();
      }
    }
  },
  methods: {
    // 达人详情路由跳转
    talentdetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    // 直播间路由跳转
    toLiveDetlis(isToPage, id) {
      if (isToPage == 1) {
        let router = this.$router.resolve({
          path: `/live/${id}`
        });
        window.open(router.href, '_blank');
      } else {
        let router = this.$router.resolve({
          path: `/talent_main/liveDetailsRoot/${id}`
        });
        window.open(router.href, '_blank');
      }
    },
    //直播列表接口
    liveListAPI() {
      this.getTime();
      this.pageLoading = true;
      this.$axios
        .post('/api/shop/GetShopData2RelationLiveList', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate, //结束时间
          PageIndex: this.page, //分页索引
          PageSize: this.size, //分页大小
          SortOrder: this.orderType, //排序
          SortValue: this.sortValue //以什么排序
        })
        .then(res => {
          if (res.data.code === 0) {
            this.table_data01 = res.data.data.list;

            this.totalCount = res.data.data.pageInfo.totalCount;
          }
          this.pageLoading = false;
        });
    },
    // 日期选择器事件
    onPick1() {
      this.KindName = '';
      this.page = 1;
      this.table_data01 = [];
      this.durationList = [];
      this.trendX = [];
      this.trendY = [];
      this.liveListAPI();
      this.liveDataAPI();
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderType = 1; //parm01=true,升序
      } else {
        this.orderType = 0;
      }
      this.sortValue = parm02;
      this.table_data01 = [];
      this.liveListAPI();
    },
    // 获取时间值
    getTime() {
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    },
    // 直播数据,时长分布接口
    liveDataAPI() {
      this.getTime();
      this.loading2 = true;
      this.loading3 = true;
      this.$axios
        .post('/api/shop/GetShopData2RelationLiveStatistics', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(responce => {
          if (responce.data.code === 0) {
            this.volume = responce.data.data.volume;
            this.amount = responce.data.data.amount;
            this.durationList = responce.data.data.duration;
            this.trendX = responce.data.data.beginTime.x;
            this.trendY = responce.data.data.beginTime.y;
          }
          this.loading2 = false;
          this.loading3 = false;
        });
    },
    // 分页函数
    changeCurrentFn(page) {
      this.page = page;
      this.table_data01 = [];
      this.liveListAPI();
    }
  }
};
</script>

<style lang="less" scoped>
.liveAnalysisShop {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: #222;
    position: relative;
    text-indent: 9px;
  }
  .title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
    border-radius: 2px;
  }
  .top {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
    .optionsBox {
      margin-left: 10px;
    }
  }
  .liveData {
    .volume {
      display: flex;
      margin-top: 21px;
      div {
        width: 354px;
        line-height: 50px;
        padding: 0 52px;
        background: #f5f5f5;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 18px;
        color: #888;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          color: #222;
          font-family: DINAlternate-Bold;
        }
      }
    }
  }
  .chart_box {
    display: flex;
    margin-top: 40px;

    > div {
      width: 100%;

      > div {
        position: relative;
        height: 260px;
        padding-top: 40px;
        width: 95%;
        margin-bottom: 40px;
      }
    }
  }
  .liveList {
    .last_list {
      .cursor {
        cursor: pointer;
      }
      table {
        text-align: center;
        margin-top: 16px;
        thead {
          img {
            width: 5px;
            height: 10px;
            vertical-align: 0;
            margin-right: 2px;
            cursor: pointer;
          }
          tr {
            th {
              padding: 0 2px;
            }
            th:nth-child(1),
            th:nth-child(2) {
              width: 20%;
              padding-left: 24px;
              text-align: left;
            }
            th:nth-child(4),
            th:nth-child(5) {
              cursor: pointer;
              width: 12%;
            }
          }
        }
        tbody {
          tr {
            height: 78px;

            td {
              padding: 0 2px;
            }
            // td:nth-child(1),
            td:nth-child(3),
            td:nth-child(4),
            td:nth-child(5) {
              font-family: DINAlternate-Bold;
              font-size: 15px;
              color: #222222;
            }
            .talentTd {
              width: 120px;
              font-weight: 600;
              font-size: 14px;
              text-align: left;
              overflow: hidden;
              color: #222;
              white-space: nowrap;
              text-overflow: ellipsis;

              img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
              }
              span:hover {
                color: #fd7f2c;
              }
            }
          }
        }

        .rightBox {
          display: flex;
          align-items: center;
          padding-left: 24px;
          cursor: pointer;
          .picture {
            width: 50px;
            height: 50px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              object-fit: cover;
            }
            .playingIcon {
              width: 18px;
              height: 18px;
              background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              border-radius: 4px;
              position: absolute;
              top: 32px;
              left: 32px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .info {
            margin-left: 10px;
            text-align: left;
            .info_top {
              width: 196px;
              font-size: 14px;
              color: #222222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .info_top:hover {
              color: #ff924b;
            }
            .info_btm {
              font-size: 13px;
              color: #888888;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
</style>